<template>
  <Page>
    <!-- 控制 dialog 弹框 -->
    <div style="margin-top: 20px">
      <el-button @click="openDialog">打开弹框</el-button>
      <el-button @click="loadDataInDialog">加载数据并在弹框中展示</el-button>

      <!-- 标题对齐方式选择 -->
      <div style="margin-top: 10px">
        <span>标题对齐：</span>
        <el-radio-group v-model="titlePosition" @change="updateTitlePosition">
          <el-radio label="left">左对齐</el-radio>
          <el-radio label="center">居中对齐</el-radio>
        </el-radio-group>
      </div>

      <!-- Footer 对齐方式选择 -->
      <div style="margin-top: 10px">
        <span>Footer 对齐：</span>
        <el-radio-group v-model="footerPosition" @change="updateFooterPosition">
          <el-radio label="left">靠左</el-radio>
          <el-radio label="center">居中</el-radio>
          <el-radio label="right">靠右</el-radio>
        </el-radio-group>
      </div>
    </div>

    <!-- 测试结果 -->
    <div style="margin-top: 20px">
      <h3>测试结果</h3>
      <pre>{{ testResults }}</pre>
    </div>

    <!-- dialog 弹框组件 -->
    <Dialog
      ref="dialogRef"
      :maskClosable="true"
      :title="'自定义标题'"
      :titlePosition="titlePosition"
      :footerPosition="footerPosition"
      @open="onOpen"
      @close="onClose"
    >
      <template #header>
        <span>自定义头部内容</span>
        <el-tag style="margin-left: 10px">标签</el-tag>
      </template>

      <div v-if="loading" class="loading">加载中...</div>
      <div v-else>
        <h4>用户数据</h4>
        <ul>
          <li v-for="(item, index) in userData" :key="index">{{ item.title }}</li>
        </ul>
      </div>

      <template #footer>
        <el-button type="primary" @click="confirmAction">确定</el-button>
      </template>
    </Dialog>
  </Page>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import Page from '@/components/page/index'
import Dialog from '@/components/dialog/index.vue'

// 获取当前实例
const { proxy } = getCurrentInstance()

// 定义 Refs
const dialogRef = ref(null)
const loading = ref(false)
const userData = ref([])
const testResults = ref('')

// 标题和 Footer 对齐方式
const titlePosition = ref('left')
const footerPosition = ref('right')

/**
 * 格式化日志输出
 */
function log(message) {
  testResults.value += `${message}\n`
}

/**
 * 打开弹框
 */
function openDialog() {
  if (dialogRef.value) {
    dialogRef.value.open()
    log('弹框已打开')
  }
}

/**
 * 关闭弹框
 */
function closeDialog() {
  if (dialogRef.value) {
    dialogRef.value.close()
    log('弹框已关闭')
  }
}

/**
 * 加载数据并在弹框中展示
 */
async function loadDataInDialog() {
  try {
    loading.value = true
    log('开始加载数据...')

    // 模拟 Axios 请求获取数据
    const mockData = [
      { id: 1, title: '任务 1' },
      { id: 2, title: '任务 2' },
      { id: 3, title: '任务 3' },
      { id: 4, title: '任务 4' },
      { id: 5, title: '任务 5' }
    ]

    // 模拟延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    userData.value = mockData.slice(0, 5) // 取前 5 条数据
    log(`成功加载 ${userData.value.length} 条数据`)
  } catch (error) {
    log(`加载数据失败: ${error.message}`)
  } finally {
    loading.value = false
  }

  // 如果弹框未打开，则自动打开
  if (!dialogRef.value.showDialog) {
    openDialog()
  }
}

/**
 * 更新标题对齐方式
 */
function updateTitlePosition(value) {
  log(`标题对齐方式已更改为：${value}`)
}

/**
 * 更新 Footer 对齐方式
 */
function updateFooterPosition(value) {
  log(`Footer 对齐方式已更改为：${value}`)
}

/**
 * 弹框打开时触发
 */
function onOpen() {
  log('弹框打开事件触发')
}

/**
 * 弹框关闭时触发
 */
function onClose() {
  log('弹框关闭事件触发')
}

/**
 * 确认操作
 */
function confirmAction() {
  console.log('用户点击了确定')
  closeDialog()
}
</script>

<style scoped>
/* 样式调整 */
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.loading {
  font-size: 16px;
  color: #999;
  text-align: center;
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
  padding: 10px;
  border-top: 1px solid #eaeaea;
}

pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  max-height: 300px;
  overflow-y: auto;
}
</style>